<template>
    <div>
        <div class="layout-breadcrumb">
            <Breadcrumb>
                <BreadcrumbItem href="/">首页</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <div class="layout-content">
            <div class="layout-content-main">
                <Table :columns="columns1" :data="data1"></Table>
            </div>
        </div>
        <Modal v-model="modal" title="警告" @on-ok="ok" @on-cancel="cancel">
            <p>确定要删除么？</p>
        </Modal>
    </div>
</template>

<script>
export default {
    data() {
        return {
            modal: false,
            controlIndex: '',
            columns1: [
                {
                    title: '姓名',
                    key: 'name'
                },
                {
                    title: '年龄',
                    key: 'age'
                },
                {
                    title: '地址',
                    key: 'address'
                },
                {
                    title: '操作',
                    key: 'control',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',
                                    background: '#00a0e9'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.index)
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.modal = true;
                                        this.controlIndex = params.index;
                                    }
                                }
                            }, '删除'),
                        ]);
                    }
                },

            ],
            data1: [
                {
                    name: '王x 明',
                    age: 18,
                    address: '北京市朝阳区芍药居'
                },
                {
                    name: '张小刚',
                    age: 25,
                    address: '北京市海淀区西二旗'
                },
                {
                    name: '李小红',
                    age: 30,
                    address: '上海市浦东新区世纪大道'
                },
                {
                    name: '周小伟',
                    age: 26,
                    address: '深圳市南山区深南大道'
                }
            ]
        }
    },
    methods: {
        show(index) {
            this.$Modal.info({
                title: '用户信息',
                content: `姓名：${this.data1[index].name}<br>年龄：${this.data1[index].age}<br>地址：${this.data1[index].address}`
            })
        },
        remove(index) {
            this.data1.splice(index, 1);
        },
        ok() {
            this.data1.splice(this.controlIndex, 1);
        },
        cancel() {
            this.$Message.info('点击了取消');
        }
    }
}
</script>

<style>

</style>
